<template>
    <div>
        <Breadcrumb style="margin:10px">
            <BreadcrumbItem :to="{name:'dashboard'}">Home</BreadcrumbItem>
            <BreadcrumbItem :to="{name:'roles'}">角色列表</BreadcrumbItem>
            <BreadcrumbItem>角色菜单</BreadcrumbItem>
        </Breadcrumb>

        <div class="content">
            <Card>

                <div>
                    <Tree :data="data4" show-checkbox multiple ref="tree" @on-check-change="choice"></Tree>
                </div>
                <div style="margin: 50px;overflow: hidden">
                    <Button type="primary" @click="handleSubmit('formData')" :disabled="subDisable">保存</Button>
                </div>

            </Card>

        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            subDisable: false,
            id: 0,
            selectData: [],
            data4: [

            ],
            loading: false,
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            let id = this.$route.params.id;
            this.id = id;
            this.loading = true;
            this.subDisable = true;
            let params = {
                id: parseInt(this.id),
            }
            this.$axios.post(this.$API.PERMISSION_ROLEMENU_LIST, params)
                .then(response => {
                    console.log(response.data.menus);

                    if (response.data && response.data.rc == '0') {
                        this.data4.push({
                            title: response.data.menus.title,
                            expand: true,
                            selected: true,
                            key: 0,
                            children: response.data.menus.children,
                        });


                        this.$nextTick(function () {
                            this.selectData = this.$refs.tree.getCheckedAndIndeterminateNodes();
                        })
                    } else {
                        this.$Message.error('错误!');
                    }
                    this.loading = false;
                    this.subDisable = false;
                });
        },
        handleSubmit(form) {
            let mid = [];
            if (this.selectData) {
                for (let i in this.selectData) {
                    let id = this.selectData[i].key;
                    if (id > 0) {
                        mid.push(id);
                    }
                }
            }
            this.subDisable = true;
            let params = {
                roleId: parseInt(this.id),
                menus: mid
            }
            this.$axios.post(this.$API.PERMISSION_ROLEMENU_ADD, params)
                .then(response => {
                    if (response.data && response.data.rc == '0') {
                        this.$Message.success('成功!');
                    } else {
                        this.$Message.error('错误!');
                    }
                    this.subDisable = false;
                });

        },
        choice() {
            this.selectData = this.$refs.tree.getCheckedAndIndeterminateNodes();
            let mid = [];
            if (this.selectData) {
                for (let i in this.selectData) {
                    let id = this.selectData[i].key;
                    if (id > 0) {
                        mid.push(id);
                    }
                }
            }
            console.log(mid);
        }
    }
}
</script>
